<div class="container">
  <h1 class="form-title">人员登记表</h1>
  <ul class="form-list">
    <!-- 输入框的双向数据绑定 -->
    <li><span class="form-list-label">姓名:</span><input type="text" class="form-input-name" [(ngModel)]= "info.username"/></li>
    <li><span class="form-list-label">性别:</span>
      <!-- radio的双向数据绑定 -->
      <div class="form-input-sex"><input type="radio" value="1" name="sex" id="sex1" [(ngModel)] = "info.sex">男</div>
      <div class="form-input-sex1"><input type="radio" value="2" name="sex" id="sex2" [(ngModel)] = "info.sex">女</div>
    </li>
    <li>
      <span class="form-list-label">城市:</span>
      <!-- selcet的双向数据绑定 -->
      <select name="city" id="city" [(ngModel)]= "info.city">
        <option *ngFor= "let item of info.cityList" [value]="item">{{item}}</option>
      </select>
    </li>
    <li>
        <span class="form-list-label">爱好:</span>
        <!-- checkbox  的双向数据绑定 -->
      <span *ngFor= "let item of info.hobbyList;let i = index">
        <input type="checkbox"  [checked]="item.checked" [id]="'check'+i" [(ngModel)]= "item.checked">{{item.hobby}}
      </span>
    </li>
    <li class="form-li-textarea">
        <span class="form-list-label">说明:</span>
        <textarea name="mark" id="mark" cols="30" rows="5" [(ngModel)]= "info.mark"></textarea>
    </li>
  </ul>
  {{info | json}}
</div>

